import React, { Fragment, useState,useEffect } from 'react';
import { Button, Row, Col, Input, Select, DatePicker,message } from 'antd'
import '../../../styles/pages/add-article.css';
import marked from 'marked'
import axios from 'axios'
import servicePath from '../../../config/apiUrl'

const AddArticle = (props) => {
	const [articleContext, setArticleContext] = useState("");//文章内容
	const [markedArticleContext, setMarkedArticleContext] = useState("");//文章内容
	const [articleIntroduce, setArticleIntroduce] = useState("");//文章简介
	const [markedArticleIntroduce, setMarkedArticleIntroduce] = useState("");//文章简介
	const [articleTitle, setArticleTitle] = useState("");//文章title
	const [articleType, setArticleType] = useState("");//文章类型
	const [articleTypeList, setArticleTypeList] = useState([]);//文章类型
	const [articleDate, setArticleDate] = useState("");//文章发布日期
	const [articleId, setArticleId] = useState(props.match.params.id || -1);//文章Id
	const changeContext = (type,e) => {
		let html;
		switch (type) {
			case "context":
				setArticleContext(e.target.value)
				html = marked(e.target.value);
				setMarkedArticleContext(html)
				break;
			case "introduce":
				setArticleIntroduce(e.target.value)
				html = marked(e.target.value);
				setMarkedArticleIntroduce(html)
				break;
			case "title":
				setArticleTitle(e.target.value)
				break;
		}
	}
	const { TextArea } = Input;
	let renderer = new marked.Renderer();
	useEffect(()=>{
		axios({
			method:"get",
			url:servicePath.getTypeInfo,
            header:{ 'Access-Control-Allow-Origin':'*' },
            withCredentials: true,
		}).then(res=>{
			let result = res.data
			if(result){
				if(result.resultCode === 1){
					setArticleTypeList(result.data)
				}
			}
		})
		if(articleId != -1){
			axios({
				method:"post",
				url:servicePath.getArticleById,
				withCredentials:true,
				header:{ 'Access-Control-Allow-Origin':'*' },
				data:{
					id:articleId
				}
			}).then(res=>{
				if(res.data.data&&res.data.data.length>0){
					let item = res.data.data[0]
					setArticleContext(item.article_content)
					setArticleIntroduce(item.introduce)
					setArticleTitle(item.title)
					setArticleDate(item.addTime)
					setArticleType(item.typeId)
					setMarkedArticleContext(marked(item.article_content));
					setMarkedArticleIntroduce(marked(item.introduce));
				}
			})
		}
	},[])
	marked.setOptions({
		renderer:renderer,
		gfm:true,
		pedantic: false,
		sanitize: false,
		tables: true,
		breaks: false,
		smartLists: true,
		smartypants: false
	})
	const dateChangeHandle = (date,dateString)=>{
		setArticleDate(dateString)
	}
	const saveArticle = ()=>{
		
		let flag = false;
		let msg = "";
		if(!articleTitle){
			msg = "文章标题不能为空"
			flag = true
		}else if(!articleContext){
			msg = "文章内容不能为空"
			flag = true
		}else if(!articleIntroduce){
			msg = "文章简介不能为空"
			flag = true
		}else if(!articleType){
			msg = "文章类型不能为空"
			flag = true
		}else if(!articleDate){
			msg = "发布日期不能为空"
			flag = true
		}
		if(flag){
			message.error(msg)
			return flag
		}
		let dataProps = {}
		dataProps.type_id = articleType // 文章类型
		dataProps.title = articleTitle
		dataProps.article_content = articleContext
		dataProps.introduce = articleIntroduce
		let dateStr = articleDate.replace('-','/')
		dataProps.addTime = (new Date(dateStr).getTime())/1000

		if(articleId == 0){
			axios({
				url:servicePath.addArticle,
				method:"post",
				data:dataProps,
				withCredentials:true
			}).then(res=>{
				if(res.data.isSuccess){
					message.success(`文章发布成功-${res.data.insertId}`)
					setArticleId(res.data.insertId)
				}
			})
		}else{//更新
			dataProps.id = articleId
			axios({
				url:servicePath.updateArticle,
				method:"post",
				header:{"Access-Control-Allow-Origin":"*"},
				withCredentials:true,
				data:dataProps
			}).then(res=>{
				if(res.data.isSuccess){
					message.success("文章更新成功")
				}
			})
		}

	}
	return (<Fragment>
		<Row gutter={10}>
			<Col span={18}>
				<Row>
					<Col xs={24} sm={12} md={14} lg={18} xl={18} xxl={20}  >
						<Input placeholder="文章标题" size="large" value={articleTitle} onChange={(e)=>{changeContext('title',e)}} />
					</Col>
					<Col xs={24} sm={12} md={10} lg={6} xl={5} xxl={4} className="comm-row">
						<Select value={articleType} defaultValue="请选择文章类型" onChange={(e)=>{setArticleType(e)}} placeholder={"请选择文章类型"} size="large">
							<Select.Option value="">请选择文章类型</Select.Option>
							{
								articleTypeList.map((item,index)=>{
									return (
										<Select.Option key={item.Id} value={item.Id}>{item.typeName}</Select.Option>
									)
								})
							}
							
						</Select>
					</Col>
				</Row>
				<Row gutter={10} className="comm-col article-div">
					<Col span={12}>
						<TextArea autoSize={true} value={articleContext} onChange={(e)=>changeContext('context',e)} size="large" className="markdown-content text-area" />
					</Col>
					<Col span={12}>
						<div 
							dangerouslySetInnerHTML={{__html:markedArticleContext}}
							className="introduce-html markdown-content"
						></div>
					</Col>
				</Row>
			</Col>
			<Col span={6}>
				<Row>
					<Col span={24} className="btn-div">
						<Button size="large">暂存文章</Button>
						<Button size="large" type="primary" onClick={saveArticle}>发布文章</Button>
					</Col>
					<Col span={24} className="comm-col">
						<TextArea size="large" className="introduce_div" autoSize={true} value={articleIntroduce} onChange={(e)=>{changeContext("introduce",e)}} />
					</Col>
					<Col span={24}>
						<div className="introduce_div introduce-html"  dangerouslySetInnerHTML={{__html:markedArticleIntroduce}}></div>
					</Col>
					<Col span={24} className="comm-col">
						<DatePicker size="large" onChange={dateChangeHandle}/>
					</Col>
				</Row>
			</Col>
		</Row>
	</Fragment>)
}

export default AddArticle